﻿    @*引用easyUI的CSS*@
    <link href="@Url.Content("~/Content/jquery-easyui-1.3.3/themes/default/easyui.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/jquery-easyui-1.3.3/themes/icon.css")" rel="stylesheet" type="text/css" />
    @*引用easyUI的JS*@
    <script src="@Url.Content("~/Content/jquery-easyui-1.3.3/jquery-1.8.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/jquery-easyui-1.3.3/jquery.easyui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js")" type="text/javascript"></script>

@*    <script src="../../Content/jquery-easyui-1.3.3/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../Content/jquery-easyui-1.3.3/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../Content/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>*@
    @*引用转换时间的JS文件*@
   <script src="../../Content/jquery-easyui-1.3.3/datapattern2.js" type="text/javascript"></script>

  <script type="text/javascript">

      $(function () {

          //实现绑定所有的的用户组的信息
          initUserRoleType();
          
          ///绑定添加用户组信息事件
          AddUserGroupInfo();
      });
      //实现对用户角色的绑定
      function initUserRoleType(queryData) {
          $('#test').datagrid({
              title: '用户组管理',
              iconCls: 'icon-save',
              height: 380,
              nowrap: true,
              autoRowHeight: false,
              striped: true,
              collapsible: true,
              url: '/User/GetUserGroupList',
              sortName: 'GroupID',
              sortOrder: 'asc',
              //striped:true,
              border: true,
              remoteSort: false,
              idField: 'GroupID',
              pagination: true,
              rownumbers: true,
              queryParams: queryData,    //参数为了多条件查询预留
              columns: [[
              //GroupID,GroupName,Remark
                    { field: 'ck', checkbox: true },
					{ field: 'GroupID', title: 'GroupID', width: 50, sortable: true },
					{ field: 'GroupName', title: '用户组名称', width: 200, sortable: true },
                    { field:'Remark',title:'备注',width:250,sortable:true }
//                    {
//                        field: 'SubTime', title: "添加时间", width: 250, sortable: true,
//                        formatter: function (value, row, index) {
//                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s");
//                        }
//                    }
                ]],

              toolbar: [{
                  id: 'btnadd',
                  text: '添加',
                  iconCls: 'icon-add',
                  handler: function () {
                      //实现弹出添加用户信息的层
                      ShowCreateUserGroupDialog();
                  }
              }, '-', {
                  id: 'btncut',
                  text: '修改',
                  iconCls: 'icon-cut',
                  handler: function () {

                      //实现弹出修改用户信息的层
                      ShowUpdateUserGroupDialog();
                  }
              }, '-', {
                  id: 'btnsave',
                  text: '删除',
                  iconCls: 'icon-remove',
                  handler: function () {
                      //确认只删除一条用户信息
                      DeleteUserGroupByClick();
                  }
              }]
          });
      }

      //实现弹出添加信息的层
      function ShowCreateUserGroupDialog() {
          $("#AddUserGroupDialog").dialog('open').dialog('setTitle', "添加用户组信息");

          //再次打开的时候清空文本框中的值
          //ClearUserRoleInfoTextBox();
      }

              //实现添加用户的操作
        function AddUserGroupInfo() {
            $("#btnAddUserGroup").click(function () {
                //验证表单是否通过
                var validate = $('#UserGroupAdd').form('validate');
                if (validate == false) {
                    return false;
                }

                //构造传递的参数，//RoleName，RoleType
                var postData = {
                    GroupName: $("#GroupName").val(),
                    Remark: $('#Remark').val()
                };

                //异步传递数据到前台进行添加
                $.post("../User/AddUserGroupInfo", postData, function (data) {
                    if (data = "OK") {
                        $.messager.alert("友情提示", "添加成功");
                        //关闭层，刷新表单
                        $("#AddUserGroupDialog").dialog('close');
                        $("#test").datagrid('reload');
                    }
                    else {
                        $.messager.alert("友情提示", "添加失败，请您检查");
                    }
                });

            })
        }


        //实现多选删除信息
        function DeleteUserGroupByClick() {
            //获取到用户选定的某一列的ID号
            var deleteUserInfoID = $("#test").datagrid("getSelections");
            //判断用户选择了多少条数据
            // //异步将删除的ID发送到后台，后台删除之后，返回前台OK，前台刷新表格
            if (deleteUserInfoID.length >= 1) {
                var ids = "";   //1,2,3,4
                for (var i = 0; i < deleteUserInfoID.length; i++) {
                    ids += deleteUserInfoID[i].GroupID + ",";
                }
                //去掉最后的一个,
                ids = ids.substring(0, ids.length - 1);

//                //遍历出删除用户的信息
//                var UNameList = "";
//                for (var i = 0; i < deleteUserInfoID.length; i++) {
//                    UNameList += deleteUserInfoID[i].UName + ",";
//                }
//                UNameList = UNameList.substring(0, UNameList.length - 1);
                //var LoginUName = $("#test").datagrid("getSelections")[0].UName;
                //发送异步请求删除数据
                $.messager.confirm("删除信息", "您确认删除<font color='Red' size='3'>" + ids + "</font>用户吗？", function (DeleteUserInfo) {
                    if (DeleteUserInfo) {
                        $.post("../User/DeleteUserGroup", { DeleteUserGroupID: ids }, function (data) {
                            if (data == "OK") {
                                $.messager.alert("友情提示", "删除成功");
                                $("#test").datagrid("reload");

                                //当删除完成的时候清除掉所选择的长度，防止下次选择的时候还记录了上次的内容
                                //第一种方法
                                //deleteUserInfoID.length = "";
                                //第二种方法
                                $("#test").datagrid("clearSelections");
                            }
                            else {
                                $.messager.alert("友情提示", "删除失败:" + data);
                            }
                        });
                    }
                });
            }
            else {
                $.messager.alert("友情提示", "请您选择要删除的数据");
            }
        }

        function ShowUpdateUserGroupDialog() {
            var UpdateUserGroupID = $("#test").datagrid("getSelections");
            if (UpdateUserGroupID.length == 1) {
                $("#UpdateUserGroupDialog").dialog("open").dialog("setTitle", "修改用户组信息");

                //绑定显示修改的详细信息的内容
                BingUpdateDetailsShowTextBox();
            }
            else {
                $.messager.alert("友情提示", "每次只能修改一行数据，你已经选择了<font color='red' size='6'>" + UpdateUserGroupID.length + "</font>行");
            }
        }

        //绑定修改用户的信息显示在用户的TextBox文本框中
        function BingUpdateDetailsShowTextBox() {
            //首先获取选中的用户的ID
            var CheckID = $("#test").datagrid("getSelections")[0].GroupID;

            //使用异步的getJSON请求绑定前台传递过来的数据
            $.getJSON("../User/GetUserGroupDetail", { GroupID: CheckID }, function (date) {
                //绑定数据显示到控件上面
                $("#GroupID").val(CheckID);
                $("#GroupName1").val(date.GroupName);
                $("#Remark1").val(date.Remark);
            });
        }

        function UpdateUserGroup() {
            var validate = $('#UpdateUserGroupInfo').form('validate');
            if (validate == false) {
                return false;
            }

            //构造传递的参数，//RoleName，RoleType
            var postData = {
                GroupID: $("#GroupID").val(),
                GroupName: $("#GroupName1").val(),
                Remark: $('#Remark1').val()
            };
            $.post("../User/UpdateUserGroup", postData, function (data) {
                if (data = "OK") {
                    $.messager.alert("友情提示", "修改成功");
                    //关闭层，刷新表单
                    $("#UpdateUserGroupDialog").dialog('close');
                    $("#test").datagrid('reload');
                }
                else {
                    $.messager.alert("友情提示", "添加失败，请您检查");
                }
            });
        }
  </script>
  <div style="width:100%;">
            @*-------------------------- 搜索-------------------------*@
    <fieldset>
        <legend ><font color="white">用户组信息模糊搜索</font></legend>
        <div>
            <label for="txtSerachRoleName">用户组名称：</label>
            <input type="text" id="txtSerachRoleName" name="txtSerachRoleName"  />&nbsp;&nbsp;       
            <label for="SOSearchRoleType">角色类型：</label>
            <select id="SOSearchRoleType" name="SOSearchRoleType" class="easyui-combobox" editable="false" >
                <option value="-1" selected="selected">---请选择---</option>
		        <option value="0">普通用户</option>
		        <option value="1">高级用户</option>
		        <option value="2">VIP高级会员</option>
                <option value="3">未知用户</option>
            </select>

            <a href="#" class="easyui-linkbutton" iconcls="icon-search" id="btnSerach"  name="btnSerach">模糊搜索</a>
        </div>
    </fieldset>
         @*-------------------------- 实现对用户组的显示-------------------------*@
    <div>
        <table id="test"></table>
    </div>

         @*----------------------------设置添加的弹出层--------------------------------*@
    <div id="AddUserGroupDialog" class="easyui-dialog" style="width:360px;height:200px;padding:10px 20px"
			closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="UserGroupAdd" method="post" novalidate="novalidate">
            <table id="tblAdd">
                <tr>
                    <th colspan="2" >添加用户组信息</th>
                </tr>
                <tr>
                    <td><label for="GroupName">用户组名称：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="GroupName" name="GroupName" data-options="required:true,validType:'length[1,32]'" /></td><td>
                </tr>
                <tr>
                    <td><label for="Remark">备注：</label></td>
                    <td><textarea id="Remark" name="Remark"></textarea></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="#" onclick="" class="easyui-linkbutton" id="btnAddUserGroup" iconcls="icon-ok" >确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#AddUserGroupDialog').dialog('close')">关闭</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>

     @*----------------------------设置修改的的弹出层--------------------------------*@
    <div id="UpdateUserGroupDialog" class="easyui-dialog" style="width:360px;height:180px;padding:10px 20px"
			closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="UpdateUserGroupInfo" method="post" novalidate="novalidate">
            <table id="tblUpdate">
                <tr>
                    <th colspan="2" >修改用户组信息</th>
                </tr>
                <tr>
                    <td><label for="GroupID">用户组ID:</label></td>
                    <td><input class="easyui-validatebox" type="text" id="GroupID" name="GroupID" readonly="true"/></td><td>
                </tr>
                <tr>
                    <td><label for="GroupName1">用户组名称：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="GroupName1" name="GroupName" data-options="required:true,validType:'length[1,32]'" /></td><td>
                </tr>
                <tr>
                    <td><label for="Remark1">备注</label></td>
                    <td><input class="easyui-validatebox" type="text" id="Remark1" name="Remark" /></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="javascript:void(0)" onclick="UpdateUserGroup()" class="easyui-linkbutton" id="btnUpdate" iconcls="icon-ok" >确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#UpdateUserGroupDialog').dialog('close')">关闭</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
  </div>